// 导入 Vuex
import Vuex from 'vuex'
// 导入 Vue
import Vue from 'vue'
// 注册 Vuex 插件
// 给所有的组件实例提供 $store 对象，
// 可以在任何一个组件内通过 this.$store 访问 store 对象
// store就是公共管理数据的仓库，也就是 vuex 的实例
Vue.use(Vuex)

// 创建 store 实例
// 这个 store 实例就是组件内的 this.$store 对象
const store = new Vuex.Store({
  // state mutations actions getters modules
  // state：存储共享的数据源
  state: {
    num: 100,
    username: '姬霓太美'
  },
  // mutations:
  // 1. 唯一可以修改state的，本质是一个个的函数，第一个参数是state
  // 2. 只书写同步代码
  mutations: {
    // 增加库存
    addNum (state, val = 1) {
      state.num += val
    },
    // 减少库存
    subNum (state, val = 1) {
      state.num -= val
    },
    // 设置库存
    setNum (state, val) {
      state.num = val
    }
  },
  // actions:
  // 1. 可以进行异步更新state，actions中通常用来书写异步代码(比如ajax请求、定时器等)
  // 2. actions中如果要对state进行更新，必须提交到mutation中
  // 3. 本质也是一个个的函数，第一个参数是store
  actions: {
    // 异步增加库存
    addNumAction (store, val = 1) {
      // 2秒后，让库存增加
      setTimeout(() => {
        // 必须提交到mutation中，才能完成对state异步更新
        store.commit('addNum', val)
      }, 2000)
    },
    // 异步减少库存
    subNumAction (store, val = 1) {
      // 2秒后，让库存减少
      setTimeout(() => {
        // 必须提交到mutation中，才能完成对state异步更新
        store.commit('subNum', val)
      }, 2000)
    }
  }
})

// 导出 store 实例
export default store
